<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">

			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-tabs">
				<view class="tabbar-box">
					<scroll-view scroll-x scroll-with-animation :show-scrollbar="false" :scroll-left="scrollLeft"
						class="tabbar">
						<view class="li" :class="{ 'active': tabIndex == index }" @click="tabfix(index)"
							v-for="(item, index) in exchange">{{ item.text }}</view>
					</scroll-view>
					<!-- <view class="exchange-icon">
						<image class="img-full" src="@/static/home/subpage/flash-type.png"></image>
					</view> -->
				</view>
			</view>
			<view class="search-box">
				<view class="search-icon">
					<image class="img-full" src="@/static/home/search.png"></image>
				</view>
				<input class="uni-input" v-model="search" @blur="searchList" placeholder="请输入关键字" />

			</view>

			<!-- 数据列表 -->
			<view class="data-box">
				<view class="date-box" v-for="(item, i) in list" :key="i">
					<view class="date-title">
						{{ item.createtime | transformTimestamp('yyyy-MM-dd') }} {{ cnWeek(item.createtime) }}
					</view>
					<view class="date-list-box">
						<view class="timeline">
						</view>
						<view class="date-item-box">
							<view class="date-item" v-for="(item1, i) in item.child" :key="i">
								<view class="date-item-left">
									<view class="date-item-left-icon">

									</view>
								</view>
								<view class="date-item-right">
									<view class="date-item-time">
										{{ item1.createtime | transformTimestamp('hh:mm:ss') }}
									</view>
									<view class="date-time-title">
										{{ item1.title }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<!-- 此处可以写其他fixed定位元素 -->
		<!-- <view></view> -->
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	data() {
		return {
			list: [], // 数据列表
			scrollLeft: 0,
			search: '',
			tabIndex: 0, // tab下标
			exchange: [{
				text: '全部',
				key: 'all',
			}, {
				text: '黑色金属',
				key: '1.1',
			}, {
				text: '有色金属',
				key: '1.2',
			}, {
				text: '油脂材料',
				key: '1.3',
			}, {
				text: '原油',
				key: '1.4',
			}, {
				text: '煤炭',
				key: '1.5',
			}]
		}
	},
	methods: {
		tabfix(index) {
			this.tabIndex = index;
			if (index > 1) this.scrollLeft = (index - 2) * 90;
			this.mescroll.triggerDownScroll()
			this.mescroll.scrollTo(0, 200)
			this.list = []
		},

		//搜索
		searchList() {
			this.mescroll.triggerDownScroll()
		},

		/*下拉刷新的回调 */
		downCallback() {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.list = []
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			let keyword = this.exchange[this.tabIndex].text
			let data = {
				pageSize: page.size,
				page: page.num,
				key: this.search
			}
			if (keyword !== '全部') {
				data.label = keyword
			}
			this.$request({
				url: this.$api.outDataFuturesExpress,
				method: 'get',
				data: data,
				successCb: (res) => {
					let data = []
					let arr = {
						createtime: '',
						child: [],
					}


					// 循环数组
					res.data.map((item) => {
						let individualization = false
						if (this.list.length != 0) {
							if (this.transformTimestamp(this.list[this.list.length - 1].createtime, 'yyyy-MM-dd') == this.transformTimestamp(item.createtime, 'yyyy-MM-dd')) {
								this.list[this.list.length - 1].child.push(item)
							} else {
								individualization = true
							}
						} else {
							individualization = true
						}

						if (individualization) {
							// 当前记录时间和循环时间是否一致
							if (this.transformTimestamp(arr.createtime, 'yyyy-MM-dd') == this.transformTimestamp(item.createtime, 'yyyy-MM-dd')) { //一致
								arr.child.push(item)
							} else { //不一致
								if (arr.createtime != '') data.push(arr)
								arr = {
									createtime: item.createtime,
									child: [item],
								}
							}

						}
					})
					if (arr.child.length != 0) data.push(arr)
					this.list = this.list.concat(data || [])
					uni.hideLoading();
					this.mescroll.endSuccess(res.count); // 隐藏加载状态栏
				},
				failCb(e) {
					uni.hideLoading();
					// this.mescroll.endErr();
					console.log(e);
					uni.showToast({
						title: e.data.msg || '服务器异常',
						icon: "none",
						duration: 2000,
					});
				}
			});
			// apiSearch(page.num, page.size, keyword).then(curPageData=>{
			// 	if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
			// 	this.goods=this.goods.concat(curPageData); //追加新数据
			// 	this.mescroll.endSuccess(curPageData.length); // 隐藏加载状态栏
			// }).catch(()=>{
			// 	//联网失败, 结束加载
			// 	this.mescroll.endErr();
			// })
		},

		// 截取当前年月日 时分秒
		transformTimestamp(timestamp, fmt) {
			let d = new Date(timestamp).getTime();
			if (Object.is(d, NaN) && timestamp) {
				timestamp = timestamp.replace(/-/g, '/')
				timestamp = timestamp.replace(/\./g, '/')
				d = new Date(timestamp).getTime();
			}

			let realDate = new Date(d);
			if (!fmt) {
				fmt = 'yyyy-MM-dd hh:mm:ss'
			}
			let o = {
				"M+": realDate.getMonth() + 1, // 月份
				"d+": realDate.getDate(), // 日
				"h+": realDate.getHours(), // 小时
				"m+": realDate.getMinutes(), // 分
				"s+": realDate.getSeconds(), // 秒
				"q+": Math.floor((realDate.getMonth() + 3) / 3), // 季度
				"S": realDate.getMilliseconds() // 毫秒
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (realDate.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (let k in o) {
				if (new RegExp("(" + k + ")").test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				}
			}
			return fmt;
		},

		//获取星期几
		cnWeek(date) {
			var cnWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			var now = new Date(date);
			var weekDay = now.getDay();
			return cnWeek[weekDay]
		},
	}
}
</script>

<style lang="scss" scoped>
/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
.sticky-tabs {
	z-index: 990;
	position: sticky;
	top: var(--window-top);
	background-color: #fff;
}

// 使用mescroll-uni,则top为0
.mescroll-uni,
/deep/.mescroll-uni {
	.sticky-tabs {
		top: 0;
	}
}

.demo-tip {
	padding: 18rpx;
	font-size: 24rpx;
	text-align: center;
}

.tabbar-box {
	position: relative;
	// padding-right: 70rpx;

	.tabbar {
		white-space: nowrap;
		border-bottom: 2rpx solid #F4F5F7;

		.li {
			display: inline-block;
			vertical-align: top;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.8);
			margin-left: 62rpx;
			padding: 24rpx 0;
			position: relative;
		}

		.li:first-child {
			margin-left: 24rpx;
		}

		.li.active {
			font-weight: bold;
			color: #EE5953;
		}

		.li.active::after {
			content: '';
			width: 48rpx;
			height: 8rpx;
			background: #EE5953;
			border-radius: 4rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}

	.exchange-icon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 25rpx;
		top: 22rpx;
	}
}

.search-box {
	width: 702rpx;
	height: 72rpx;
	background: #F4F5F7;
	border-radius: 36rpx;
	margin: 24rpx auto;
	display: flex;
	box-sizing: border-box;
	align-items: center;

	.search-icon {
		width: 48rpx;
		height: 48rpx;
		margin: 0 20rpx;
	}

	.uni-input {
		border: none;
	}
}

.data-box {
	margin-top: 32rpx;
	padding: 0 24rpx;

	.date-box {
		margin-top: 32rpx;

		.date-title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.date-list-box {
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			box-sizing: border-box;
			width: 100%;

			.timeline {
				width: 4rpx;
				height: 100%;
				background-color: #F5F5F5;
				position: absolute;
				top: 32rpx;
				left: 10rpx;
				bottom: 0;
			}

			.date-item-box {
				flex: 1;
			}

			.date-item {
				display: flex;
				// align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 32rpx;

				.date-item-left {
					.date-item-left-icon {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						border: 4rpx solid #EE5953;
						background-color: #ffffff;
						position: absolute;
						box-sizing: border-box;
					}
				}

				.date-item-right {
					width: 654rpx;
					background: #F4F5F7;
					border-radius: 16rpx;
					padding: 32rpx;
					box-sizing: border-box;

					// margin-left: 63rpx;
					.date-item-time {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #324558;
					}

					.date-time-title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
						line-height: 34rpx;
						margin-top: 24rpx;
					}
				}
			}
		}

	}
}
</style>